<template>
  <el-container>
    <el-main>
      <el-row class="news">
        <el-col class="newsBody" :span="18">
          <el-row class="newsBody__header">
            <el-col :span="20" class="newsBody__header__nav">
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }"
                  >首页</el-breadcrumb-item
                >
                <el-breadcrumb-item
                  :to="{ path: `/class/${classification.id}/0` }"
                  >{{ classification.name }}</el-breadcrumb-item
                >
                <el-breadcrumb-item
                  :to="{ path: `/class/${classification.id}/${map.id}` }"
                  >{{ map.name }}</el-breadcrumb-item
                >
                <el-breadcrumb-item :to="{ path: `/news/${news.id}` }">
                  {{ news.title }}
                </el-breadcrumb-item>
              </el-breadcrumb>
            </el-col>
            <el-col :span="4" class="newsBody__header__complain">
              <Complain :news="news"></Complain>
            </el-col>
          </el-row>
          <News :news="news" />
          <Recommend :recommend="recommend" />
          <Comment :comments="comments" :add-comment="addComment" />
        </el-col>
        <el-col class="news__rank" :span="6">
          <Rank :title="'日榜'" :rank="rank.day" />
          <Rank :title="'周榜'" :rank="rank.week" />
          <Rank :title="'月榜'" :rank="rank.month" />
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import Rank from '@/components/news/Rank'
import Complain from '@/components/news/complain'
import Recommend from '@/components/news/recommend'
import Comment from '@/components/news/comment'
import News from '@/components/public/News'
export default {
  components: { News, Recommend, Comment, Rank, Complain },
  computed: {
    user() {
      return this.$store.state.user
    },
    classification() {
      return this.$store.getters['classification/aclass'](this.news.classId)
    },
    map() {
      return this.$store.getters['classification/amap'](
        this.news.classId,
        this.news.mapId
      )
    }
  },
  async asyncData({ app, params }) {
    let rank = {}
    const id = params.id
    const { status: statusRank, data: dataRank } = await app.$axios.get(
      `/news/rank`
    )
    if (statusRank === 200 && dataRank.code === 1) {
      rank = dataRank.data
    }
    let recommend = {}
    const {
      status: statusRecommend,
      data: dataRecommend
    } = await app.$axios.get(`/news/recommend`, {
      params: { id }
    })
    if (statusRecommend === 200 && dataRecommend.code === 1) {
      recommend = dataRecommend.data
    }
    let comments = {}
    const { status: statusComment, data: dataComment } = await app.$axios.get(
      `/news/comment`,
      {
        params: { id }
      }
    )
    if (statusComment === 200 && dataComment.code === 1) {
      comments = dataComment.data
    }
    let news = {}
    const { status: statusNews, data: dataNews } = await app.$axios.get(
      `/news`,
      {
        params: { id }
      }
    )
    if (statusNews === 200 && dataNews.code === 1) {
      news = dataNews.data
    }
    return { rank, recommend, comments, news }
  },
  methods: {
    async addComment(id, content) {
      const { status, data } = await this.$axios.post('/news/comment', {
        id: this.news.id,
        replyId: id,
        content
      })
      if (status === 200) {
        if (data.code === 0) {
          const time = data.data.time
          this.$message({
            message: '添加评论成功',
            type: 'success'
          })
          const user = {
            id: this.user.id,
            name: this.user.name,
            avatar: this.user.avatar
          }
          if (id === -1) {
            this.comments.push({
              id,
              content,
              reply: [],
              time,
              user
            })
          } else {
            for (const comment of this.comments) {
              const tempObj = {
                id,
                content,
                replyUser: {
                  id: comment.user.id,
                  name: comment.user.name
                },
                time,
                user
              }
              if (comment.id === id) {
                comment.reply.push(tempObj)
                return
              }
              let hasId = false
              for (const reply of comment.reply) {
                if (reply.id === id) {
                  comment.reply.push(tempObj)
                  hasId = true
                  return
                }
              }
              if (hasId) {
                return
              }
            }
          }
        } else {
          this.$message({
            message: data.msg,
            type: 'error'
          })
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.news {
  margin: 0 auto;
  padding: 0;
  width: $--typeArea;
  background: #fff;
}
.news__body {
  height: 100%;
}
.news__rank {
  padding: 10px 20px;
  border-left: 1px #eeeeee solid;
  height: 100%;
}
.newsBody {
  padding: 10px 20px 0px 20px;
}
.newsBody__header {
  height: 40px;
  & .el-col {
    height: 100%;
  }
}
.newsBody__header__nav {
  @include flexCenter($jc: flex-start);
}
.newsBody__header__complain {
  @include flexCenter($jc: flex-end);
}
.el-divider {
  margin: 6px 0;
}
</style>
